<template>
    <div class="StaffHome" >
        <div class="container-logo">
            <div class="logo"></div>
            <span class="cpy">四川房巢科技智慧售楼管理平台</span>
        </div>
        <div class="user-div">
            <i class="iconfont icon-yonghu1"></i>
        </div>
        <div class="user-name">
            <div class="face"></div>
            <div class="my-name">
                <span class="my-name-info name">野原新之助</span>
                <span class="my-name-info great">棒!加油加油!</span>
            </div>
        </div>
        <div class="score">
            <div class="my-score my-progress">
                <span>本月业绩(万元)</span>
                <span>100/500</span>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50" color="#e7ac8c"></el-progress>
            </div>
            <div class="sum my-progress">
                <span>套数</span>
                <span>3/5</span>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50" color="#8bd471"></el-progress>
            </div>
            <div class="money my-progress">
                <span>回款(万元)</span>
                <span>214/5000</span>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50" color="#f0bb7d"></el-progress>
            </div>
        </div>
        <!--认筹认购签约统计-->
        <ul class="my-sum">
            <li>
                <p>认筹</p>
                <span>1</span>
            </li>
            <li>
                <p>认购</p>
                <span>2</span>
            </li>
            <li>
                <p>签约</p>
                <span>3</span>
            </li>
        </ul>
        <!--客户管理-->
        <div class="my-customer">
            <div class="customer-title">
                <div class="customer-name">
                    <span></span>
                    <span>客户</span>
                    <span>(36)</span>
                </div>
                <div class="customer-handle">
                    <span>
                        <el-badge :value="200" :max="99" class="item">
                            <i class="iconfont icon-message"></i>
                        </el-badge>

                    </span>
                    <span><i class="iconfont icon-cc-plus-square"></i></span>
                    <span><i class="iconfont icon-todo_list"></i></span>
                </div>
            </div>
            <div class="customer-search">
                <input type="text" placeholder="输入客户手机号">
                <i class="iconfont icon-sousuo" @click="sousuo()"></i>
            </div>
            <table class="customer-table">
                <tr>
                    <td>
                        <span><i class="iconfont icon-zuijinlaifang"></i></span>
                        <span>今日来访</span>
                    </td>
                    <td>
                        <span><i class="iconfont icon-fenpeikehu"></i></span>

                        <span>新分配客户</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span><i class="iconfont icon-genjin"></i></span>
                        <span>今日跟进</span>
                    </td>
                    <td>
                        <span><i class="iconfont icon-yuqi"></i></span>
                        <span>三日内逾期</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span><i class="iconfont icon-yuqi1"></i></span>
                        <span>五日内逾期</span>
                    </td>
                    <td>
                        <span><i class="iconfont icon-yuqi2"></i></span>
                        <span>七日内逾期</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span><i class="iconfont icon-yuqiqishu"></i></span>
                        <span>十日内逾期</span>
                    </td>
                    <td>
                        <span><i class="iconfont icon-yuqiguanjia"></i></span>
                        <span>十日以上逾期</span>
                    </td>
                </tr>
            </table>
        </div>

        <foot></foot>
    </div>
</template>

<script>
    export default {
        name: "staffHome",
        methods:{
            sousuo(){
                console.log(123123123);
            }
        },
    }
</script>

<style scoped>
    html,body{

    }
    .StaffHome{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:48.5rem;
        background-color: #31cb97;
        background-image: url("../../assets/img/home_bg.jpg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .container-logo{
        width: 19rem;
        height: 7rem;
        position: absolute;
        top: 2rem;
        left: 1.2rem;
    }
    .container-logo > .logo{
        margin: .5rem auto ;
        width: 10rem;
        height: 3.46rem;
        background-image: url("../../assets/img/logo.png");
        background-size: cover;
    }
    .container-logo > .cpy{
        font-size: 0.9rem;
    }
    .user-div{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top:10.5rem;
        left: 9.67rem;
    }
    .user-div > i{
        font-size:2.5rem;
        color:white;
    }
    .user-name{
        width:10rem;
        height: 3rem;
        position: absolute;
        top: 13.5rem;
        left: 6rem;
    }
    .user-name > .face{
        width:3rem;
        height: 100%;
        background-image: url("../../assets/img/face.png");
        background-size: contain;
        float: left;
    }
    .user-name > .my-name{
        width:7rem;
        height: 100%;
        float: left;
    }
    .user-name > .my-name > .my-name-info{
        display: block;
        width: 100%;
        height:50%;
        color:white;
    }
    .user-name > .my-name > .name{
        font-weight: bold;
        font-size: 1rem;
    }
    .user-name > .my-name > .great{
        font-size: 0.8rem;
    }
    .score{
        width: 18rem;
        height: 9rem;
        position: absolute;
        top: 17rem;
        left: 1.8rem;
        border-bottom: 1px solid #16aa78;
    }
    .score > .my-progress{
        margin:0.2rem;
    }
    .score > .my-progress > span{
        font-size: 0.5rem;
        color: white;
    }
    .score > .my-progress > span:nth-child(1){
        float: left;
    }
    .score > .my-progress > span:nth-child(2){
        float: right;
    }
/*认筹认购签约统计*/
    .my-sum{
        width:100%;
        height: 2rem;
        position: absolute;
        top: 26.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .my-sum > li{
        margin: 0;
        padding:0;
        width:33%;
        height:1rem;
        float:left;
    }
    .my-sum > li > p,span{
        margin:0;
        height: 1rem;
        font-size: 0.8rem;
    }
    .my-sum > li > p{
        color:#b1f2dc;
    }
    .my-sum > li > span{
        color:#f6fffe;
    }

    /*客户管理*/
    .my-customer{
        width:100%;
        height:15rem;
        position: absolute;
        top: 29rem;
        left: 0;
        background-color: white;
    }
    .my-customer > .customer-title {
        width:100%;
        height:2rem;
    }
    .my-customer > .customer-title > .customer-name{
        width:50%;
        height: 100%;
        float: left;
        text-align: left;
    }
    .my-customer > .customer-title > .customer-handle{
        width:50%;
        height: 100%;
        float: left;
    }
    .my-customer > .customer-title > .customer-name > span:nth-child(1){
        display:inline-block;
        width:0.3rem;
        height:0.8rem;
        background-color: #37cb99;
        margin: 1rem 0 0 1rem;
    }
    .my-customer > .customer-title > .customer-name > span:nth-child(2){
        font-size:1.4rem;
        color:#323232
    }
    .my-customer > .customer-title > .customer-name > span:nth-child(3){
        font-size:1rem;
        color:#afafaf
    }
    .my-customer > .customer-title > .customer-handle > span{
        display: inline-block;
        width:30%;
        line-height: 2.5rem;
    }
    .my-customer > .customer-title > .customer-handle > span:nth-child(1){
        line-height: 1rem;
        position: absolute;
        top: 0.7rem;
        left: 7.8rem;
    }
    .my-customer > .customer-title > .customer-handle > span  i{
        font-size: 1.5rem;
    }
    .my-customer >.customer-search{
        width:100%;
        height: 1.5rem;
        margin-top: 0.5rem;
    }
    .my-customer >.customer-search > input{
        width:90%;
        height: 1.5rem;
        line-height: 1.5rem;
        outline: none;
        padding-left: 1rem;
        border: 1px solid #e2e2e2;
    }
    .my-customer >.customer-search > i{
        position: absolute;
        top: 2.9rem;
        left: 19rem;
    }
    /*操作列表*/
    .my-customer > .customer-table{
        width:100%;
        height:10rem;
        border-collapse: collapse;
        margin-top: 0.5rem;
    }
    .my-customer > .customer-table td{
        border: 1px solid #efefef;
    }
    .my-customer > .customer-table td span{
        display: inline-block;
    }
    .my-customer > .customer-table td span:first-child{
        width:30%;
        text-align: right;
    }
    .my-customer > .customer-table td span:last-child{
        width:65%;
        text-align: left;
    }
    .my-customer > .customer-table i {
        color: #35deb5;
        font-size:1.2rem;
    }
</style>